<template>
  <div>
    <a-form :form="form">
      <a-form-item
        label="难度"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-decorator="['schoolCode', {rules: [{required: true, message: '请输入学校代号'}]}]" />
      </a-form-item>
      <a-form-item
        label="作者"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-decorator="['schoolName', {rules: [{required: true, message: '请输入学校名称'}]}]" />
      </a-form-item>
      <a-form-item
        label="题面"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <quill-editor ref="myTextEditor" v-model="content" :options="quillOption">
        </quill-editor>
      </a-form-item>
    </a-form>
    <br><br><br><br><br><br><br>
    <div class="footer">
      <a-button type="primary" @click="handleSubmit">确认</a-button>
      <a-button style="margin-left: 8px" @click="handleCancel">取消</a-button>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import katex from 'katex'
import 'katex/dist/katex.min.css'

// import 'katex/dist/katex.min.css'

import { quillEditor } from 'vue-quill-editor'
import quillConfig from './quill-config.js'
// import VueKatex from 'vue-katex'

export default {
  components: {
    quillEditor
  },
  data () {
    return {
      content: '<h2>hello quill-editor</h2>',
      quillOption: quillConfig,
      // vueKatex: VueKatex,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      confirmLoading: false,

      form: this.$form.createForm(this)
    }
  },
  mounted () {
    quillConfig.initButton()
    window.katex = katex
  },
  methods: {
    add () {
    },
    handleSubmit () {

    },
    handleCancel () {
      this.form.resetFields()
      this.$router.push({ path: '/platform/ai' })
    }
  }
}
</script>

<style>
  .footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
    text-align:center
  }
  .withdrawals1 {
    width: 10%;
    height: 44px;
    background: none;
    color: #92ff4b;
    font-size: 14px;
    border-radius: 4px;
  }
  p {
    margin: 10px;
  }

  .edit_container,
  .quill-editor {
    height: 200px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: "10px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: "18px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: "32px";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "标准字体";
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "衬线字体";
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "等宽字体";
  }
</style>
